<template>
    <el-dropdown v-if="$store.state.settings.enableI18n" class="language-container" size="medium" @command="languageCommand">
        <slot />
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item v-for="(item, index) in locales" :key="index" :disabled="$store.state.settings.defaultLang === item.name" :command="item.name">{{ item.labelName }}</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script>
import { getElementLocales } from '@/locales'

export default {
    name: 'I18nSelector',
    props: {},
    data() {
        return {}
    },
    computed: {
        locales: () => getElementLocales()
    },
    mounted() {},
    methods: {
        languageCommand(command) {
            this.$i18n.locale = command
            this.$store.commit('settings/setDefaultLang', command)
            this.$route.meta.title && this.$store.commit('settings/setTitle', this.generateI18nTitle(this.$route.meta.i18n, this.$route.meta.title))
        }
    }
}
</script>

<style lang="scss" scoped>
// scss
</style>
